<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
           margin: 0;
           padding: 0;
        }
        html,body{
           width: 100%;
           height: 100%;
        }
        body{
           background:#1e1e1f;
           overflow:hidden;
        }
        .box{
           width: 100%;
           height: 100%;
           position: relative;
           transform-style: preserve-3d;
           transform:rotateX(-20deg) rotateY(0deg);
        }
        .box img{
           width: 420px;
           height: 320px;
           position: absolute;
           left: calc(50% - 150px);
           top: calc(50% - 100px);
           border: 5px solid #ffffff;
           user-select: none;
           -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
        }
        #wrap p{
           width: 1200px;
           height: 1200px;
           background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
           position: absolute;
           top:100%;left:50%;
           margin-top: -600px;
           margin-left: -600px;
           border-radius:600px;
           transform:rotateX(90deg);
        }
        audio{
            position: absolute;
            top: 20px;
            left: 50%;
            margin-left: -150px;
        }
     </style>
</head>
  <body >
     <div class="box" id="wrap">
        <img src="img/1.jpg" />
        <img src="img/2.jpg" />
        <img src="img/3.jpg" />
        <img src="img/4.jpg" />
        <img src="img/5.jpg" />
        <img src="img/6.jpg" />
        <img src="img/7.jpg" />
        <p></p>
        <audio controls="controls" autoplay="autoplay">
            <source src="/咩野sama - 咱们结婚吧（翻自 齐晨）.mp3" type="audio/ogg" />
            <source src="song.mp3" type="audio/mpeg" />
          </audio>
     </div>
  
  </body>
  <script>

     setTimeout(init,100);
     function init(){
        var imgArray = document.getElementsByTagName('img');
          var deg = 360/imgArray.length;//单位度数
          [].forEach.call(imgArray,function(node,index){
              // console.log(index*deg);//每张图片应该旋转的度数
              node.style.transform = "rotateY("+index*deg+"deg)translatez(550px)";//赋予给图片，并撑开350px
              node.style.transition = "3s "+(imgArray.length - index)*0.11+"s";
          });
  
          var newX,newY,pervX,pervY,minusX,minusY;
          var roY = 0 , roX = -5;
          var oWrap = document.getElementById("wrap");//通过id获取元素
          var timer;
          // 拖拽：三个事件-按下 移动 抬起
          //按下
          document.onmousedown = function(ev){
              ev = ev || window.event;
  
              //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
              lastX = ev.clientX;
              lastY = ev.clientY;
  
              //移动
              this.onmousemove = function(ev){
                  ev = ev || window.event;
  
                  clearInterval( timer );
  
                  nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
                  nowY = ev.clientY; // clientY ………………………………顶部………………
  
                  //当前坐标和前一点坐标差值
                  minusX = nowX - lastX;
                  minusY = nowY - lastY;
  
                  //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
                  roY += minusX*0.1; // roY = roY + minusX*0.2;
                  roX -= minusY*0.1;
  
                  oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
  
                  /*
                  //生成div，让div跟着鼠标动
                  var oDiv = document.createElement('div');
                  oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
                  this.body.appendChild(oDiv);
                  */
  
                  //前一点的坐标
                  lastX = nowX;
                  lastY = nowY;
  
              }
              //抬起
              this.onmouseup = function(){
                  this.onmousemove = null;
                  timer = setInterval(function(){
                      minusX *= 0.95;
                      minusY *= 0.95;
                      roY += minusX*0.2; // roY = roY + minusX*0.2;
                      roX -= minusY*0.1;
                      oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
  
                      if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 )
                      {
                          clearInterval( timer );
                      }
                    //   console.log( minusX );
                  },15);
              }
              return false;
          }
     };

  </script>
</body>
</html>